<!-- #layout name=default -->
<div id="main" class="offset-top" v-cloak>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="page-header">
          <h1 class="title">Profile</h1>
        </div>
        <ul class="nav nav-tabs">
          <li
            v-for="(item,index) in tabs"
            :key="index"
            :class="{active:item.value==currentTab}"
            @click="currentTab=item.value"
          >
            <a href="javascript:;">{{ item.displayName }}</a>
          </li>
        </ul>
        <div class="tab-content">
          <section
            :class="{active:currentTab=='Account',in:currentTab=='Account'}"
            class="tab-pane fade"
          >
            <kb-form
              class="margin-top-20"
              :model="accountModel"
              :rules="accountModelRules"
              ref="accountForm"
            >
              <kb-form-item>
                <label class="control-label col-md-3">Username</label>
                <div class="col-md-9">
                  <p class="form-control-static">{{ user.userName }}</p>
                </div>
              </kb-form-item>
              <kb-form-item prop="emailAddress">
                <label class="control-label col-md-3">Email</label>
                <div class="col-md-9">
                  <p v-if="user.emailAddress" class="form-control-static"
                    >{{ user.emailAddress }}</p
                  >
                  <input
                    v-else
                    type="text"
                    class="form-control input-large"
                    v-model="accountModel.emailAddress"
                  />
                </div>
              </kb-form-item>
              <kb-form-item>
                <label class="control-label col-md-3">Language</label>
                <div class="col-md-9">
                  <select
                    v-model="accountModel.language"
                    class="form-control input-large"
                  >
                    <option
                      v-for="(item,index) in languageOptions"
                      :key="index"
                      :value="item.key"
                      >{{ item.value }}</option
                    >
                  </select>
                </div>
              </kb-form-item>
              <kb-form-item>
                <div class="col-md-9 col-md-offset-3">
                  <button @click="saveUser" class="btn green">Save</button>
                </div>
              </kb-form-item>
            </kb-form>
          </section>

          <section
            :class="{active:currentTab=='Password',in:currentTab=='Password'}"
            class="tab-pane fade"
          >
            <kb-form
              class="form-horizontal margin-top-20"
              :model="passwordModel"
              :rules="passwordModelRules"
              ref="passwordForm"
              simple
            >
              <kb-form-item
                prop="oldPassword"
                class="form-group"
                v-slot="error"
              >
                <div class="clearfix" :class="{'has-error': error.error}">
                  <label class="control-label col-md-3">Old password</label>
                  <div class="col-md-9">
                    <input
                      type="password"
                      class="form-control input-large"
                      v-model="passwordModel.oldPassword"
                      v-kb-tooltip:right.manual.error="error.error"
                    />
                  </div>
                </div>
              </kb-form-item>
              <kb-form-item
                prop="newPassword"
                class="form-group"
                v-slot="error"
              >
                <div class="clearfix" :class="{'has-error': error.error}">
                  <label class="control-label col-md-3">New password</label>
                  <div class="col-md-9">
                    <input
                      type="password"
                      class="form-control input-large"
                      v-model="passwordModel.newPassword"
                      v-kb-tooltip:right.manual.error="error.error"
                    /> </div
                ></div>
              </kb-form-item>
              <kb-form-item
                prop="confirmPassword"
                class="form-group"
                v-slot="error"
              >
                <div class="clearfix" :class="{'has-error': error.error}">
                  <label class="control-label col-md-3">Confirm password</label>
                  <div class="col-md-9">
                    <input
                      type="password"
                      class="form-control input-large"
                      v-model="passwordModel.confirmPassword"
                      v-kb-tooltip:right.manual.error="error.error"
                    /> </div
                ></div>
              </kb-form-item>
              <kb-form-item class="form-group">
                <div class="col-md-9 col-md-offset-3">
                  <button @click="savePassword" class="btn green">Save</button>
                </div>
              </kb-form-item>
            </kb-form>
          </section>

          <section
            :class="{active:currentTab=='Organization',in:currentTab=='Organization'}"
            class="tab-pane fade"
          >
            <kb-form class="margin-top-20">
              <kb-form-item>
                <label class="control-label col-md-3"
                  >Current organization</label
                >
                <div class="col-md-9">
                  <p class="form-control-static">{{ organization.name }}</p>
                </div>
              </kb-form-item>
              <kb-form-item>
                <label class="control-label col-md-3">Is Admin</label>
                <div class="col-md-9">
                  <p class="form-control-static"
                    >{{ Kooboo.text.common[user.isAdmin ? "yes" : "no"] }}</p
                  >
                  <span v-if="!user.isAdmin" class="help-block"
                    >{{ Kooboo.text.account.youAreNotAdmin }}</span
                  >
                </div>
              </kb-form-item>
              <kb-form-item>
                <label class="control-label col-md-3"
                  >Switch organization</label
                >
                <div class="col-md-9">
                  <select
                    class="form-control input-large"
                    v-model="organizationModel.organizationId"
                  >
                    <option
                      v-for="(item,index) in organizationOptions"
                      :key="index"
                      :value="item.id"
                      >{{ item.name }}</option
                    >
                  </select>
                </div>
              </kb-form-item>
              <kb-form-item>
                <div class="col-md-9 col-md-offset-3">
                  <button @click="saveOrganization" class="btn green"
                    >Switch</button
                  >
                </div>
              </kb-form-item>
            </kb-form>
          </section>

          <section
            :class="{active:currentTab=='Users',in:currentTab=='Users'}"
            class="tab-pane fade"
          >
            <kb-form
              simple
              class="form-horizontal margin-top-20"
              :model="userModel"
              :rules="userModelRules"
              ref="userForm"
            >
              <kb-form-item class="form-group">
                <label class="control-label col-md-3">Organization name</label>
                <div class="col-md-9">
                  <p class="form-control-static">{{ organization.name }}</p>
                </div>
              </kb-form-item>
              <kb-form-item class="form-group">
                <label class="control-label col-md-3">Users</label>
                <div class="col-md-9">
                  <ul>
                    <li v-for="(item,index) in users" :key="index">
                      <span>{{ item }}</span>
                      <template v-if="item!==organization.name">
                        <a
                          href="javascript:;"
                          title="Remove"
                          @click="deleteUser(item)"
                        >
                          <i class="fa fa-close"></i>
                        </a>
                      </template>
                    </li>
                  </ul>
                </div>
              </kb-form-item>
              <kb-form-item class="form-group" prop="userName" v-slot="error">
                <div class="clearfix" :class="{'has-error': error.error}">
                  <label class="control-label col-md-3">Add user</label>
                  <div class="col-md-9">
                    <input
                      type="text"
                      class="form-control input-large"
                      placeholder="Enter user name"
                      v-model="userModel.userName"
                      v-kb-tooltip:right.manual.error="error.error"
                    />
                  </div>
                </div>
              </kb-form-item>
              <kb-form-item class="form-group">
                <div class="col-md-9 col-md-offset-3">
                  <button @click="addNewUser" class="btn green">Add</button>
                </div>
              </kb-form-item>
            </kb-form>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbForm.js",
    "/_Admin/Scripts/lib/jquery.qrcode.min.js"
  ]);

  new Vue({
    el: "#main",
    data: function() {
      var me = this;
      return {
        user: {},
        organization: {},
        users: [],
        usersInit: false,
        currentTab: "Account",
        languageOptions: [],
        organizationOptions: [],
        organizationInit: false,
        accountModel: {
          username: "",
          language: "",
          emailAddress: ""
        },
        accountModelRules: {
          emailAddress: [
            {
              required: Kooboo.text.validation.required
            },
            {
              pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
              message: Kooboo.text.validation.emailInvalid
            },
            {
              remote: {
                url: Kooboo.User.isUniqueEmail(),
                data: function() {
                  return {
                    name: me.accountModel.emailAddress
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        },
        passwordModel: {
          userName: "",
          oldPassword: "",
          newPassword: "",
          confirmPassword: ""
        },
        passwordModelRules: {
          oldPassword: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 30,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                30
            }
          ],
          newPassword: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 30,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                30
            }
          ],
          confirmPassword: [
            { required: Kooboo.text.validation.required },
            {
              validate: function(value) {
                return value == me.passwordModel.newPassword;
              },
              message: Kooboo.text.validation.notEqual
            }
          ]
        },
        organizationModel: {
          organizationId: ""
        },
        userModel: {
          organizationId: "",
          userName: ""
        },
        userModelRules: {
          userName: [{ required: Kooboo.text.validation.required }]
        }
      };
    },
    mounted: function() {
      var me = this;
      Kooboo.User.get().then(function(res) {
        if (res.success) {
          me.user = res.model;
          me.accountModel.username = res.model.userName;
          me.passwordModel.username = res.model.userName;
          me.accountModel.language = res.model.language;
          me.accountModel.emailAddress = res.model.emailAddress;
        }
      });
      Kooboo.User.getCulture().then(function(res) {
        if (res.success) {
          me.languageOptions = Kooboo.objToArr(res.model);
        }
      });
    },
    computed: {
      tabs: function() {
        var tabs = [
          {
            displayName: Kooboo.text.site.profile.Account,
            value: "Account"
          },
          {
            displayName: Kooboo.text.site.profile.Password,
            value: "Password"
          },
          {
            displayName: Kooboo.text.site.profile.Organization,
            value: "Organization"
          }
        ];
        if (this.user.isAdmin) {
          tabs.push({
            displayName: Kooboo.text.site.profile.Users,
            value: "Users"
          });
        }
        return tabs;
      }
    },
    methods: {
      saveUser: function() {
        var valid = true;
        var me = this;

        if (!this.user.emailAddress) {
          valid = this.$refs.accountForm.validate();
        }

        if (valid) {
          Kooboo.User.updateProfile(this.accountModel).then(function(res) {
            window.info.show(
              Kooboo.text.info.update[res.success ? "success" : "fail"],
              res.success
            );
            if (res.success && me.user.language != me.accountModel.language) {
              setTimeout(function() {
                location.reload();
              }, 300);
            }
          });
        }
      },
      savePassword: function() {
        if (this.$refs.passwordForm.validate()) {
          var me = this;
          Kooboo.User.changePassword(this.passwordModel).then(function(res) {
            me.passwordModel.oldPassword = "";
            me.passwordModel.newPassword = "";
            me.passwordModel.confirmPassword = "";
            me.$refs.passwordForm.clearValid();

            window.info.show(
              Kooboo.text.info.update[res.success ? "success" : "fail"],
              res.success
            );
          });
        }
      },
      saveOrganization: function() {
        var me = this;
        Kooboo.Organization.changeUserOrg(this.organizationModel).then(function(
          res
        ) {
          window.info.show(
            Kooboo.text.info.update[res.success ? "success" : "fail"],
            res.success
          );

          if (res.success) {
            localStorage.clear();
            location.href =
              res.model.redirectUrl || Kooboo.Route.User.LoginPage;
          }
        });
      },
      deleteUser: function(user) {
        var me = this;
        Kooboo.Organization.deleteUser({
          organizationId: this.organization.id,
          userName: user
        }).then(function(res) {
          if (res.success) {
            me.users = me.users.filter(function(f) {
              return f != user;
            });
          }
        });
      },
      addNewUser: function() {
        if (this.$refs.userForm.validate()) {
          var me = this;
          Kooboo.Organization.addUser(this.userModel).then(function(res) {
            if (res.success) {
              me.users.push(me.userModel.userName);
              me.userModel.userName = "";
              me.$refs.userForm.clearValid();
              window.info.done(Kooboo.text.info.update.success);
            }
          });
        }
      }
    },
    watch: {
      currentTab: function(value, old) {
        var me = this;
        if (old == "Account") this.$refs.accountForm.clearValid();
        if (old == "Password") this.$refs.passwordForm.clearValid();
        if (old == "Users") this.$refs.userForm.clearValid();

        if (value == "Organization" && !this.organizationInit) {
          Kooboo.Organization.getOrganizations().then(function(res) {
            if (res.success) {
              me.organizationOptions = res.model;
              Kooboo.Organization.getOrg().then(function(r) {
                if (r.success) {
                  me.organization = r.model;
                  me.organizationModel.organizationId = r.model.id;
                  me.organizationInit = true;
                }
              });
            }
          });
        }

        if (value == "Users" && !this.usersInit) {
          Kooboo.Organization.getOrg().then(function(res) {
            if (res.success) {
              me.organization = res.model;
              me.userModel.organizationId = res.model.id;
              Kooboo.Organization.getUsers({
                organizationId: res.model.id
              }).then(function(r) {
                if (r.success) {
                  me.users = r.model.map(function(o) {
                    return o.userName;
                  });
                  me.usersInit = true;
                }
              });
            }
          });
        }
      }
    }
  });
</script>
